default.jsx provides a fallback UI for parallel route slots when Next.js cannot recover their active state after a full-page reload; without it, unmatched slots trigger a 404 error or build failure depending on your Next.js version
In Next.js parallel routes, default.js (or .jsx/.tsx) serves as a critical fallback mechanism for handling hard navigations—specifically full-page reloads or direct URL access [citation:2][citation:3]. Its purpose stems from how Next.js manages slot state: during client-side navigation (soft navigation), Next.js tracks each slot's active subpage and preserves it. However, on a full-page reload, the framework cannot recover this state for slots that don't have a matching page at the current URL. The default.js file provides a fallback UI for exactly these scenarios [citation:1][citation:5].
Consider a folder structure where a @team slot has a /settings page but the @analytics slot does not. When a user navigates to /settings via client-side navigation, the @team slot correctly renders its settings page while the @analytics slot maintains its previously active page [citation:1][citation:3]. If the user refreshes the browser (hard navigation), Next.js loses the knowledge of what was active in @analytics. Without a default.js file, it has no instructions for what to render in that slot, leading to a 404 error [citation:1][citation:5]. This applies to all named slots, and importantly, to the implicit children slot as well [citation:2][citation:7].
In Next.js 15 and earlier: Missing
default.jsresults in a 404 error for the unmatched slot during hard navigation, leading to confusing UI states where slots unexpectedly show 404 pages [citation:1][citation:3][citation:6].In Next.js 16 (upcoming): Starting with version 16, this requirement becomes stricter. The build will fail entirely if any parallel route slot (except the implicit children slot) lacks a
default.jsfile. This change adds build-time validation to catch configuration errors before deployment [citation:9].The children slot (implicit) also needs a root
default.jsfile. Without it, navigating to routes without a matching page in the children slot will result in a 404 [citation:2][citation:6].Without
default.js, patterns like modals with intercepted routes break on page refresh—the modal content disappears and shows 404 instead of gracefully reverting to the regular page [citation:1].
The children prop is an implicit slot, treated exactly like named slots [citation:1][citation:5]. This means you also need a root default.js file (at the same level as your layout) to provide a fallback for the children slot during hard navigation [citation:2][citation:6]. Without it, navigating to a route that doesn't have a matching page in the children slot will result in a 404 on refresh. This is a common oversight when implementing parallel routes with intercepting patterns like modals [citation:1].